<template>
  <div>
    <navs title="成为双千专家" fixed></navs>
    <van-form @submit="onSubmit" style="margin-top: 46px">
      <van-cell-group>
        <van-field
          v-model="form.name"
          name="name"
          label="姓名"
          readonly
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field name="gender" label="性别">
          <template #input>
            <van-radio-group
              v-model="form.gender"
              direction="horizontal"
              checked-color="#2D65AC"
            >
              <van-radio :name="0">男</van-radio>
              <van-radio :name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.intro"
          rows="2"
          autosize
          label="专家简介"
          type="textarea"
          maxlength="150"
          placeholder="请输入专家的基本情况"
          show-word-limit
          :rules="[{ required: true, message: '请输入专家简介' }]"
        />
        <van-field
          name="expert_photo"
          label="专家照片"
          :rules="[{ required: true, message: '未上传专家照片' }]"
        >
          <template #input>
            <van-uploader
              v-model="form.coverList"
              :after-read="uploadCover"
              accept="image/png,image/jpeg,image/jpg"
            />
          </template>
        </van-field>
        <van-field
          v-model="form.unit"
          name="unit"
          label="所在单位"
          placeholder="请输入所在单位"
          :rules="[{ required: true, message: '请输入所在单位' }]"
        />
        <van-row class="van-cell van-field">
          <van-col class="van-cell__title van-field__label">
            <label>职务职称</label>
          </van-col>
          <van-col class="custom-field">
            <van-field
              v-model="form.job_title"
              name="job_title"
              label=" "
              label-class="custom-label"
              placeholder="请输入您的职务职称"
              :rules="[{ required: true, message: '请输入您的职务职称' }]"
            />
            <div class="u-f second">
              <label>级别：</label>
              <van-radio-group
                v-model="form.job_level"
                direction="horizontal"
                checked-color="#2D65AC"
              >
                <van-radio :name="0">初级</van-radio>
                <van-radio :name="1">中级</van-radio>
                <van-radio :name="2">高级</van-radio>
              </van-radio-group>
            </div>
          </van-col>
        </van-row>
        <van-field
          v-model.number="form.political_status"
          label="政治面貌"
          readonly
          is-link
          name="picker"
          placeholder="请选择政治面貌"
          @click="politicsPicker = true"
          :rules="[{ required: true, message: '请选择政治面貌' }]"
        />
        <van-popup v-model:show="politicsPicker" position="bottom">
          <van-picker
            :columns="form.politicalList"
            @confirm="politicsPickerConfirm"
            @cancel="politicsPicker = false"
          />
        </van-popup>
        <van-field
          readonly
          v-model="form.phone"
          name="phone"
          label="联系方式"
          placeholder="请输入联系方式"
          :rules="[{ required: true, message: '请输入联系方式' }]"
        />
        <van-field
          v-model="form.research_direction"
          name="research_direction"
          label="研究方向"
          placeholder="请输入您的研究方向"
          :rules="[{ required: true, message: '请输入您的研究方向' }]"
        />
        <van-field
          name="course_object"
          label="课程对象"
          :rules="[{ required: true, message: '请选择课程对象' }]"
        >
          <template #input>
            <van-checkbox-group
              v-model="form.course_object"
              direction="horizontal"
              checked-color="#2D65AC"
            >
              <van-checkbox
                icon-size="18px"
                :name="`${key}`"
                shape="square"
                v-for="(item, key, index) in courseObjList"
                :key="index"
                >{{ item }}</van-checkbox
              >
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
          v-model="form.course_name"
          name="direction"
          label="课程名称"
          placeholder="请输入课程名称"
          :rules="[{ required: true, message: '请输入课程名称' }]"
        />
        <van-field
          name="course_coverList"
          label="课程封面"
          :rules="[{ required: true, message: '未上传课程封面' }]"
        >
          <template #input>
            <van-uploader
              v-model="form.course_coverList"
              :after-read="uploadCourseCover"
              accept="image/png,image/jpeg,image/jpg"
            />
          </template>
        </van-field>
        <van-field
          v-model.number="form.course_time"
          type="number"
          name="course_time"
          label="课程时长"
          placeholder="请输入课程时长"
          :rules="[{ required: true, message: '请输入课程时长' }]"
        >
          <template #extra> （课时） </template></van-field
        >
        <van-field
          v-model="form.course_intro"
          rows="2"
          autosize
          label="课程简介"
          type="textarea"
          maxlength="150"
          placeholder="请输入课程简介"
          show-word-limit
          :rules="[{ required: true, message: '请输入课程简介' }]"
        />
        <div class="p12 ft28">
          <van-checkbox
            v-model="form.checked"
            checked-color="#2D65AC"
            label-disabled
            >阅读并同意 <a @click="showProtocol = true">《XXXXXX注册协议》</a>
          </van-checkbox>
          <agreeProtocol
            v-model="showProtocol"
            src="/register_protocol.html"
            @back="back"
            @agree="agree"
          ></agreeProtocol>
        </div>
        <div class="p20">
          <van-button
            round
            block
            color="#2D65AC"
            native-type="submit"
            :disabled="!form.checked"
          >
            提交
          </van-button>
        </div>
      </van-cell-group>
    </van-form>
  </div>
  <!-- <van-popup
    :close-on-click-overlay="false"
    v-model:show="addProtocolPopup"
    round
    position="bottom"
    :style="{ height: '30%' }"
  >
    <div class="pt32 pb32 pl16 pr16">
      <div class="ft40 mb16">加入《双千助力双减》需要您同意协议</div>
      <div class="colorPrimary ft28" @click="registerPopup = true">
        《用户注册协议》
      </div>
      <div class="colorPrimary ft28">《个人信息及隐私保护协议》</div>
      <div class="colorPrimary ft28">《用户注册协议》</div>
      <div class="u-f mt16">
        <van-button
          color="#2D65AC"
          plain
          type="primary"
          class="br4"
          @click="addProtocolPopup = false"
          >下次提醒</van-button
        >
        <van-button
          color="#2D65AC"
          type="primary"
          class="flex1 ml20 br4"
          @click="AgreeProtocol"
          >已同意以上协议</van-button
        >
      </div>
    </div>
  </van-popup>
  <protocol :isShow="registerPopup" src="/register_protocol.html"></protocol> -->
  <success :isShow="isSuccess">
    <p>您的基地申请已经提交成功，审核进度可在个人中心查看。</p>
  </success>
</template>

<script setup>
import success from '@/components/success.vue'
import protocol from '@/components/protocol/protocol.vue'
import agreeProtocol from '@/components/protocol/agreeProtocol.vue'
import { ref, reactive, getCurrentInstance } from 'vue'
import { uploadFile } from '@/utils/upload.js'
import { courseObjList } from '@/utils/model/index.js'
const form = reactive({
  checked: false,
  name: '专家姓名',
  gender: 1,
  expert_photo:
    'd1000/tmp/uploads/2021/12/27/85d0e478-66bb-11ec-8264-f01898eca9ad.jpg',
  unit: '专家的单位',
  job_title: '职称',
  job_level: 1,
  political_status: 1,
  phone: '18832655665',
  research_direction: '航空航天',
  course_object: ['1', '2'],
  course_name: '这是课程',
  course_cover:
    'd1000/tmp/uploads/2021/12/26/18439e82-6660-11ec-94be-5254003daaf6.jpg',
  course_time: 1,
  course_intro: '这里用来写简介这里用来写简介这里用来写简介这里用来写简介',
  course_coverList: [],
  coverList: []
})
const isSuccess = ref(false) //是否提交成功
let addProtocolPopup = ref(false) //点击专家显示弹窗
let registerPopup = ref(false) //查看协议弹窗
let showProtocol = ref(false)
let politicsPicker = ref(false) //政治面貌弹窗
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

// 专家照片上传
const uploadCover = (info) => {
  uploadFile(info)
    .then((res) => {
      form.expert_photo = res.name
      form.coverList[0].url = _this.$oss + res.name
    })
    .catch(() => {
      form.coverList[0].status = 'error'
    })
}
// 课程封面上传
const uploadCourseCover = (info) => {
  uploadFile(info)
    .then((res) => {
      form.course_cover = res.name
      form.course_coverList[0].url = _this.$oss + res.name
    })
    .catch(() => {
      form.course_coverList[0].status = 'error'
    })
}
const AgreeProtocol = () => {
  store.commit('user/setIsAgreeProtocol', true)
  addProtocolPopup.value = false
}
//点击确认政治面貌
const politicsPickerConfirm = (obj) => {
  console.log(obj)
}
// 协议退出
const back = () => {
  form.checked = false
}
// 同意协议
const agree = () => {
  form.checked = true
}
// 表单点击提交
const onSubmit = (obj) => {
  console.log(form)
  _this.$api.expert
    .applyExpert(form)
    .then((res) => {
      isSuccess.value = true
    })
    .catch((err) => console.log(err))
}
</script>

<style scoped lang="scss">
:deep(.van-field__label) {
  width: 5em;
}
/* 表单label 自定义样式 */
:deep(.custom-label) {
  width: auto !important;
  margin: 0px;
}
.custom-field {
  flex: 1;
  .second {
    padding: var(--van-cell-vertical-padding) 0px;
  }
  .van-cell {
    padding: 0px 0px var(--van-cell-vertical-padding);
  }
  .van-cell::after {
    left: 0px;
  }
}
</style>
